<template>
	<view class="container">
		<view class="top-list">
			<router-link to="/pages/modifyNickName/modifyNickName" class="top-list-item flex align-center justify-between">
				<text class="label">昵称</text>
				<view class="flex align-center mr-24">
					<text class="value">{{info.nickname}}</text>
					<u-icon size="24" color="#ccc" name="arrow-right"></u-icon>
				</view>
			</router-link>
			<router-link to="/pages/personMsg/personMsg" class="top-list-item flex align-center justify-between">
				<text class="label">个人资料</text>
				<view class="flex align-center mr-24">
					<u-icon size="24" color="#ccc" name="arrow-right"></u-icon>
				</view>
			</router-link>
			<view class="top-list-item flex align-center justify-between" @tap="toRecognize">
				<text class="label">实名认证</text>
				<view class="flex align-center mr-24">
					<text class="value"
						:class="info.shiming?'down-color':'up-color'">{{info.shiming?'已认证':'未认证'}}</text>
					<u-icon size="24" color="#ccc" name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="top-list-item flex align-center justify-between" @tap="turnBank">
				<text class="label">银行卡</text>
				<view class="flex align-center mr-24">
					<text class="value"
						:class="info.bankcard.length?'down-color':'up-color'">{{info.bankcard.length?'已绑定':'未绑定'}}</text>
					<u-icon size="24" color="#ccc" name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<!-- 		<view class="bottom-list">
			<view class="bottom-item flex justify-between align-center">
				<text class="label"></text>
				<text class="value"></text>
			</view>
			<view class="bottom-item flex justify-between align-center">
				<text class="label"></text>
				<text class="value"></text>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					bankcard:[]
				}
			};
		},
		methods:{
			turnBank(){
				if(this.info.bankcard.length){
					this.$Router.push("/pages/bankCardDetail/bankCardDetail")
				}
				else{
					this.$Router.push("/pages/bankCard/bankCard")
				}
			},
			toRecognize(){
				if(this.info.shiming){
					return false
				}
				else{
					this.$Router.push("/pages/recognize/recognize")
				}
			},
		},
		async onShow() {
			try {
				this.info = await this.$u.api.personInfoApi()
			} catch (e) {
				//TODO handle the exception
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding-top: 20rpx;

		.top-list {
			background-color: #fff;

			.top-list-item {
				padding-left: 24rpx;
				height: 96rpx;
				border-bottom: 1rpx solid $color-gray;

				&:last-child {
					border-bottom: none;
				}

				.label {
					font-size: 30rpx;
					color: #333333;
				}

				.mr-24 {
					margin-right: 24rpx;
				}

				.value {
					margin-right: 22rpx;
					font-size: 28rpx;
				}
			}
		}
	}
</style>
